<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
 
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My WebSocket</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  </head>
   
  <body>
    Welcome<br/>
    <br/>
    <br/>
    <input type="text" id="userid" value="">
    <input type="button" value="登录" onclick="loginSocket()">
    
    
    <input style="width: 500px;" id="text" type="text" />
     <button onclick="send()">Send</button>   
     <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
  </body>
   
  <script type="text/JavaScript">
  
  	var websocket = null;
  
	  function loginSocket(){
		  var userid = $("#userid").val();
		//判断当前浏览器是否支持WebSocket
	      if('WebSocket' in window){
	          websocket = new WebSocket("ws://localhost:9090/socketTestDemo/chat?userid="+userid);
	      }
	      else{
	          alert('Not support websocket');
	      }
		
	      //连接发生错误的回调方法
	      websocket.onerror = function(){
	          setMessageInnerHTML("error");
	      };
	       
	      //连接成功建立的回调方法
	      websocket.onopen = function(event){
	          setMessageInnerHTML("open");
	      };
	       
	      //接收到消息的回调方法
	      websocket.onmessage = function(){
	          setMessageInnerHTML(event.data);
	      };
	       
	      //连接关闭的回调方法
	      websocket.onclose = function(){
	          setMessageInnerHTML("close");
	      };
	       
	      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	      window.onbeforeunload = function(){
	          websocket.close();
	      };
		
	  }
  
      
       
      
       
    
       
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML){
    	  alert(innerHTML);
    	  
    	  var data = jQuery.parseJSON(innerHTML);
    	  alert(data[0].shopid);
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
       
      //关闭连接
      function closeWebSocket(){
          websocket.close();
      }
       
      //发送消息
      function send(){
          var message = document.getElementById('text').value;
          websocket.send(message);
          /*
 	 	 接收的消息串格式  shopid:商店编号  state：1订单提醒 2服务提醒
 	  	[ { "shopid": "8a9ad8035c0c5381015c0c7461db0023", "state":"1"}]
 	  	*/
      }
  </script>
</html>